<template>
  <div class="wrapper">
    <dx-header-bar title="集客专线大会战"></dx-header-bar>
    <div>
      <md-tab-bar class="tab-bar"
                  v-model="current"
                  :items="items"
                  :has-ink="false"
                  @change="changeItem"
      >
        <template slot="item" slot-scope="{ item }">
          <div>
            <div class="text" :class="{active: currentTab === item.label}">
              <span v-text="item.name"></span>
            </div>
          </div>
        </template>
      </md-tab-bar>
    </div>
    <div class="content-wrapper">
      <div class="panel" v-for="(item,index) in dataList" :key="index">
        <div class="title">{{item.name}}</div>
        <div v-for="(item1,index1) in item.list" :key="index1">
          <div class="sub-title">{{item1.name}}</div>
          <dx-e-chart class="chart" ref="chartCpt"
                      :color="[ '#ff9a3f']"
                      :show-legend="true"
                      :x-axis-vertical="true"
                      :x-axis-data="item1.xAxisData"
                      :series="item1.seriesData">
          </dx-e-chart>
          <div class="desc-box">
            <span class="desc color">标准线</span>
            <span class="desc-1 color-1"
                  v-if="item1.challengeValue!==null">挑战线</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import {
  Dialog,
  Toast,
  TabBar
} from 'mand-mobile';
import { DxHeaderBar, DxEChart } from '@/components';
import { getBattleDetail } from '@/api/resource';

export default {
  components: {
    DxHeaderBar,
    DxEChart,
    [TabBar.name]: TabBar
  },
  data() {
    return {
      current: this.$route.query.currentTab,
      currentTab: this.$route.query.currentTab,
      items: [
        { name: '业务质量', label: 0 },
        { name: '开通能力', label: 1 },
        { name: '服务支撑能力', label: 2 },
        { name: '资源质量', label: 3 },
        { name: '服务质量', label: 4 },
        { name: '覆盖能力', label: 5 }
      ],
      dateTime: this.$route.query.dateTime,
      parentIndex: this.$route.query.parentIndex,
      dataList: [],
      viewityList: [],
      chartXAxisData: [],
      chartSeries: []
    };
  },
  mounted() {
    this.initData();
  },

  created() {
  },
  methods: {
    initData() {
      // this.$refs.chartCpt.showLoading();
      const params = {
        dateTime: this.dateTime,
        parentIndex: this.parentIndex
      };
      this.dataList = [];
      getBattleDetail(params).then(result => {
        if (result.success === true) {
          /* eslint-disable */
          const data = result.data;
          const datas = [];
          for (let obj in data) {
            const objData = [];
            for (let objDataS in data[obj]) {
              objData.push({ name: objDataS, value: data[obj][objDataS] });
            }
            datas.push({ name: obj, value: data[obj], list: objData });
          }
          const list = [];
          datas.forEach(item => {
            const data = [];
            item.list.forEach(item1 => {
              const xAxisData = [];
              const seriesData = [];
              let reachValue = '';
              let challengeValue = '';
              item1.value.forEach(item2 => {
                xAxisData.push(item2.CITY);
                seriesData.push(item2.INDEX_VALUE);
                reachValue = item2.REACH_VALUE;
                challengeValue = item2.CHALLENGE_VALUE;
              });
              const markXAxis = xAxisData[xAxisData.length - 1];
              const series = [
                {
                  type: 'line',
                  data: seriesData,
                  markLine: {
                    data: [
                      [
                        // 标准线
                        {
                          name: '', xAxis: 0, yAxis: reachValue,
                          lineStyle: {//设置折线色颜色
                            color: '#2f86f6'
                          },
                          symbol: 'none'
                        },
                        {
                          name: '', xAxis: markXAxis, yAxis: reachValue,
                          lineStyle: {
                            color: '#2f86f6'
                          }, symbol: 'none'
                        },
                      ],
                      [
                        //  挑战线
                        {
                          name: '', xAxis: 0, yAxis: challengeValue,
                          lineStyle: {//设置折线色颜色
                            color: '#48ff7c'
                          },
                          symbol: 'none'
                        },
                        {
                          name: '', xAxis: markXAxis, yAxis: challengeValue,
                          lineStyle: {
                            color: '#48ff7c'
                          }, symbol: 'none'
                        },
                      ]
                    ]
                  },
                }
              ];
              data.push({ name: item1.name, xAxisData: [xAxisData], seriesData: series, reachValue, challengeValue });
            });
            list.push({ name: item.name, list: data });
          });
          this.dataList = list;
          this.$nextTick(() => {
            for (let i = 0; i < this.$refs.chartCpt.length; i++) {
              this.$refs.chartCpt[i].updateChart();
            }
          });
        }
        else {
          Dialog.alert({
            title: '提示',
            content: result.msg,
            confirmText: '确定'
          });
        }
      }).catch(() => {
        Toast.failed('数据加载失败');
        this.$refs.chartCpt.hideLoading();
      });
    },
    changeItem(val) {
      this.currentTab = val.label;
      this.parentIndex = val.name;
      this.initData();
    }
  }
};
</script>

<style lang="stylus" scoped>

  .wrapper
    display : flex
    flex-direction : column
    height : 100%

  .content-wrapper
    flex : 1
    overflow-y : auto
    font-size : 28px

  .tab-bar
    font-size : 28px

  .text
    padding : 8px 12px
    border : 1px solid #999999
    border-radius : 4px

  .active
    border : 1px solid #2f86f6 !important
    color : #2f86f6 !important

  .panel
    margin-top : 20px
    background : #fff

  .title
    padding : 20px;
    font-size : 32px
    line-height : 32px
    border-bottom : 1px solid #eee
    font-weight : bold
    &:before
      content : ""
      display : inline-block
      margin-right : 10px
      vertical-align : bottom
      height : 30px
      width : 7px
      background : #ff9a3f
      border-radius : 10px

  .sub-title
    font-size : 28px
    padding : 16px
    color : #666666
    border-bottom : 1px solid #eee

  .chart
    padding : 0 20px
    height : 400px
    width : 100%

  .desc-box
    padding-bottom : 20px
    text-align : center
    font-size : 26px

  .desc
    &:before
      content : ""
      display : inline-block
      margin : 0 10px
      vertical-align : middle
      height : 1px
      width : 40px
      border-top : 1px dashed #2f86f6
      border-radius : 10px

  .desc-1
    &:before
      content : ""
      display : inline-block
      margin : 0 10px
      vertical-align : middle
      height : 1px
      width : 40px
      border-top : 1px dashed #48ff7c
      border-radius : 10px

  .color
    color : #2f86f6

  .color-1
    color : #48ff7c

  table
    margin-top : 20px
    line-height : 38px
    background : #fff
    text-align : center
    font-size : 28px

  th, td
    padding : 20px 8px
    border-bottom : 1px solid #eee
    border-right : 1px solid #eee

  thead
    tr
      background : #f5f9fe
</style>
